<script lang="ts">
import {defineComponent, PropType} from "vue"

export default defineComponent({
  name: "ShowQrcodeData",
  props: {
    qrcode: {
      type: Object as PropType<{ code: string, exp: number, end: number }>,
      required: true
    }
  }
})
</script>
<template>
  <div>
    <el-descriptions :column="1" border>
      <el-descriptions-item label="授权码">
        <el-space>
          <span>{{ qrcode.code }}</span>
          <svg-icon class="app-tap" v-copy="qrcode.code" size="22" name="copy"></svg-icon>
        </el-space>
      </el-descriptions-item>
      <el-descriptions-item label="有效期">
        {{ qrcode.exp }}秒
      </el-descriptions-item>
      <el-descriptions-item label="截止使用">
        <show-time format="Y-m-d H:i:s" :describe="false" :time="qrcode.end"></show-time>
        后失效
      </el-descriptions-item>
    </el-descriptions>

    <el-alert type="error" :closable="false">
      <template #default>
        1:授权码只能使用一次<br/>
        2:用授权码登录无需输入密码,临时授权无需担心密码泄露<br/>
        3:授权码登录后和密码登录权限相同
      </template>
    </el-alert>
  </div>
</template>